<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 绿植中心 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }

  .el-tabs__nav-scroll {
    padding-left: 22%;
  }

  p {
    font-size: 14px;
  }
</style>

<body>
  <div id="green">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 网页内容 -->
    <section>
      <div style="width: 100%; height: 400px; overflow: hidden;">
        <img src="../img/slider-home-v1.jpg" width="100%" alt="">
      </div>
    </section>
    <!-- 商品 -->
    <section style="margin: 5% 0;">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img src="../img/object-09.png" alt="">
          </div>
          <div style="display: flex; margin-top: 2%;">
            <div style="margin: auto;">
              <img src="../img/line.jpg" height="6px" width="329px" alt="">
            </div>
            <div style="margin: auto;">
              <h1 style="font-weight: 600;margin: auto;">PRODUCTS</h1>
            </div>
            <div style="margin: auto;">
              <img src="../img/line.jpg" height="6px" width="329px" alt="">
            </div>
          </div>
          <div style="margin-top: 1%;margin-bottom: 2%;">
            <h5 style="color: rgb(142, 179, 89);font-weight: 600;">- 产品 -</h5>
          </div>
        </div>
        <!-- 分类产品 -->
        <div style="margin-bottom: 3%;">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="多肉小苗" name="多肉小苗" value="多肉小苗">
              <div v-if="flag" class="container">
                <div class="row">
                  <div class="col-md-4" v-for="item in tableData" style="margin-top: 3%;" @click="green_goods(item)">
                    <img :src="url+'/download/'+item.img" width="100%" alt="">
                    <h6 style="text-align: center;margin-top: 2%;">{{ item.name }}</h6>
                  </div>
                </div>
                <div style="text-align: center;margin-top: 2%;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <div class="row">
                  <div class="col-md-4">
                    <img :src="url+'/download/'+ruleForm.img" height="100%" width="80%" alt="">
                  </div>
                  <div class="col-md-8">
                    <h5>{{ ruleForm.name }}</h5>
                    <hr>
                    <p style="font-size: 14px;">价格：<span style="color: red;font-size: 18px; font-weight: 600;">{{
                        ruleForm.price }}</span></p>
                    <p>「材 料」 {{ ruleForm.material }}</p>
                    <p>「包 装」 {{ ruleForm.packing }}</p>
                    <p>「花 语」 {{ ruleForm.language }}</p>
                    <p>「配送范围」 {{ ruleForm.distribution }}</p>
                    <div style="display: flex;">
                      <el-button type="primary" @click="addShop()" plain>加入购物车</el-button>
                      <el-button type="success" @click="Buy()" plain>立即购买</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="多肉盆栽" name="多肉盆栽" value="多肉盆栽">
              <div v-if="flag" class="container">
                <div class="row">
                  <div class="col-md-4" v-for="item in tableData" style="margin-top: 3%;" @click="green_goods(item)">
                    <img :src="url+'/download/'+item.img" width="100%" alt="">
                    <h6 style="text-align: center;margin-top: 2%;">{{ item.name }}</h6>
                  </div>
                </div>
                <div style="text-align: center;margin-top: 2%;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <div class="row">
                  <div class="col-md-4">
                    <img :src="url+'/download/'+ruleForm.img" height="100%" width="80%" alt="">
                  </div>
                  <div class="col-md-8">
                    <h5>{{ ruleForm.name }}</h5>
                    <hr>
                    <p style="font-size: 14px;">价格：<span style="color: red;font-size: 18px; font-weight: 600;">{{
                        ruleForm.price }}</span></p>
                    <p>「材 料」 {{ ruleForm.material }}</p>
                    <p>「包 装」 {{ ruleForm.packing }}</p>
                    <p>「花 语」 {{ ruleForm.language }}</p>
                    <p>「配送范围」 {{ ruleForm.distribution }}</p>
                    <div style="display: flex;">
                      <el-button type="primary" @click="addShop()" plain>加入购物车</el-button>
                      <el-button type="success" @click="Buy()" plain>立即购买</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="植物摆件" name="植物摆件" value="植物摆件">
              <div v-if="flag" class="container">
                <div class="row">
                  <div class="col-md-4" v-for="item in tableData" style="margin-top: 3%;" @click="green_goods(item)">
                    <img :src="url+'/download/'+item.img" width="100%" alt="">
                    <h6 style="text-align: center;margin-top: 2%;">{{ item.name }}</h6>
                  </div>
                </div>
                <div style="text-align: center;margin-top: 2%;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <div class="row">
                  <div class="col-md-4">
                    <img :src="url+'/download/'+ruleForm.img" height="100%" width="80%" alt="">
                  </div>
                  <div class="col-md-8">
                    <h5>{{ ruleForm.name }}</h5>
                    <hr>
                    <p style="font-size: 14px;">价格：<span style="color: red;font-size: 18px; font-weight: 600;">{{
                        ruleForm.price }}</span></p>
                    <p>「材 料」 {{ ruleForm.material }}</p>
                    <p>「包 装」 {{ ruleForm.packing }}</p>
                    <p>「花 语」 {{ ruleForm.language }}</p>
                    <p>「配送范围」 {{ ruleForm.distribution }}</p>
                    <div style="display: flex;">
                      <el-button type="primary" @click="addShop()" plain>加入购物车</el-button>
                      <el-button type="success" @click="Buy()" plain>立即购买</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="多肉盆器" name="多肉盆器" value="多肉盆器">
              <div v-if="flag" class="container">
                <div class="row">
                  <div class="col-md-4" v-for="item in tableData" style="margin-top: 3%;" @click="green_goods(item)">
                    <img :src="url+'/download/'+item.img" width="100%" alt="">
                    <h6 style="text-align: center;margin-top: 2%;">{{ item.name }}</h6>
                  </div>
                </div>
                <div style="text-align: center;margin-top: 2%;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <div class="row">
                  <div class="col-md-4">
                    <img :src="url+'/download/'+ruleForm.img" height="100%" width="80%" alt="">
                  </div>
                  <div class="col-md-8">
                    <h5>{{ ruleForm.name }}</h5>
                    <hr>
                    <p style="font-size: 14px;">价格：<span style="color: red;font-size: 18px; font-weight: 600;">{{
                        ruleForm.price }}</span></p>
                    <p>「材 料」 {{ ruleForm.material }}</p>
                    <p>「包 装」 {{ ruleForm.packing }}</p>
                    <p>「花 语」 {{ ruleForm.language }}</p>
                    <p>「配送范围」 {{ ruleForm.distribution }}</p>
                    <div style="display: flex;">
                      <el-button type="primary" @click="addShop()" plain>加入购物车</el-button>
                      <el-button type="success" @click="Buy()" plain>立即购买</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="花卉绿植" name="花卉绿植" value="花卉绿植">
              <div v-if="flag" class="container">
                <div class="row">
                  <div class="col-md-4" v-for="item in tableData" style="margin-top: 3%;" @click="green_goods(item)">
                    <img :src="url+'/download/'+item.img" width="100%" alt="">
                    <h6 style="text-align: center;margin-top: 2%;">{{ item.name }}</h6>
                  </div>
                </div>
                <div style="text-align: center;margin-top: 2%;">
                  <el-pagination background layout="prev, pager, next" :current-page="current" :total="total"
                    @current-change="currentPage" :page-size="6">
                  </el-pagination>
                </div>
              </div>
              <div v-else class="container">
                <div class="row">
                  <div class="col-md-4">
                    <img :src="url+'/download/'+ruleForm.img" height="100%" width="80%" alt="">
                  </div>
                  <div class="col-md-8">
                    <h5>{{ ruleForm.name }}</h5>
                    <hr>
                    <p style="font-size: 14px;">价格：<span style="color: red;font-size: 18px; font-weight: 600;">{{
                        ruleForm.price }}</span></p>
                    <p>「材 料」 {{ ruleForm.material }}</p>
                    <p>「包 装」 {{ ruleForm.packing }}</p>
                    <p>「花 语」 {{ ruleForm.language }}</p>
                    <p>「配送范围」 {{ ruleForm.distribution }}</p>
                    <div style="display: flex;">
                      <el-button type="primary" @click="addShop()" plain>加入购物车</el-button>
                      <el-button type="success" @click="Buy()" plain>立即购买</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>
  new Vue({
    el: '#green',
    data() {
      return {
        activeName: '多肉小苗',
        flag: true,
        tableData: [],
        ruleForm: {},
        shopForm: {},
        current: 1,
        total: 1,
        url: 'http://localhost:9081/common',
      };
    },
    created() {
      this.page_init();
    },
    methods: {

      // 添加到购物车
      async addShop() {
        if (localStorage.getItem("userId") == null) {
          window.location.href = './login.html';
          return;
        }
        this.shopForm.uid = localStorage.getItem("userId");
        this.shopForm.gid = this.ruleForm.id;
        this.shopForm.goodsImg = this.ruleForm.img;
        this.shopForm.price = this.ruleForm.price;
        this.shopForm.count = 1;
        this.shopForm.goodsLanguage = this.ruleForm.language;
        this.shopForm.goodsName = this.ruleForm.name;
        const { data: result } = await this.$http.post('http://localhost:9081/plants_shop/insert', this.shopForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
      },
      // 立即购买
      async Buy() {
        if (localStorage.getItem("userId") == null) {
          window.location.href = './login.html';
          return;
        }
        this.shopForm.uid = localStorage.getItem("userId");
        this.shopForm.gid = this.ruleForm.id;
        this.shopForm.goodsImg = this.ruleForm.img;
        this.shopForm.price = this.ruleForm.price;
        this.shopForm.count = 1;
        this.shopForm.goodsName = this.ruleForm.name;
        const { data: result } = await this.$http.post('http://localhost:9081/plants_orders/insert', this.shopForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
      },
      // 当点击分类时调用
      handleClick(el) {
        this.activeName = el.$attrs.value;
        this.flag = true
        this.current = 1;
        this.page_init();
      },
      // 初始化
      async page_init() {
        const { data: result } = await this.$http.get('http://localhost:9081/plants_goods/type/' + this.activeName + '/' + this.current);
        if (result.flag) {
          // 促销活动的数据
          this.tableData = result.list;
          // 当前页面
          this.current = result.current;
          // 总条数
          this.total = result.total;
        }
      },
      // 当切换页面时调用
      currentPage(val) {
        this.current = Number(val);
        this.page_init();
      },
      // 查看详细信息
      green_goods(item) {
        this.ruleForm = {}
        this.flag = false;
        this.ruleForm = item;
      }
    }
  })
</script>

</html>